<template>
<div class="wrapper">
<!-- 顶部应用栏 -->
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<AddressSelector @address-changed="handleAddressChange" />
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
<span class="practice-text">（前端开发实践）</span>
</section>
</div>
</header>

<!-- 搜索栏 -->
<SearchBar />

<!-- 分类导航 -->
<div class="category-container">
<div class="category-grid">
<div v-for="(category, index) in categories" :key="index" 
     class="category-item" @click="toBusinessList(category.id)">
<div class="category-icon">
<img :src="category.icon" :alt="category.name">
</div>
<span class="category-name">{{ category.name }}</span>
</div>
</div>
</div>

<!-- 促销横幅 -->
<div class="promo-banner">
<div class="promo-content">
<h3>品质套餐</h3>
<p>搭配齐全吃得好</p>
<button class="mdc-button mdc-button--raised">
<span class="mdc-button__label">立即抢购</span>
<i class="material-icons">arrow_forward</i>
</button>
</div>
</div>

<!-- 会员卡片 -->
<div class="member-card">
<div class="member-content">
<div class="member-info">
<img src="@/assets/super_member.png" alt="超级会员">
<div class="member-text">
<h3>超级会员</h3>
<p>每月享超值权益</p>
</div>
</div>
<button class="mdc-button mdc-button--outlined">
<span class="mdc-button__label">立即开通</span>
<i class="material-icons">arrow_forward</i>
</button>
</div>
</div>

<!-- 推荐商家 -->
<div class="recommend-section">
<div class="section-header">
<div class="divider"></div>
<h2>推荐商家</h2>
<div class="divider"></div>
</div>

<!-- 筛选选项 -->
<div class="filter-options">
<button class="mdc-button mdc-button--text">
<span class="mdc-button__label">综合排序</span>
<i class="material-icons">expand_more</i>
</button>
<button class="mdc-button mdc-button--text">距离最近</button>
<button class="mdc-button mdc-button--text">销量最高</button>
<button class="mdc-button mdc-button--text">
<i class="material-icons">filter_list</i>
<span class="mdc-button__label">筛选</span>
</button>
</div>

<!-- 商家列表 -->
<div class="business-list">
<div v-for="(business, index) in businesses" :key="index" class="business-card" @click="toBusinessInfo(business)" style="cursor:pointer">
<img :src="business.image" :alt="business.name" class="business-image">
<div class="business-info">
<div class="business-header">
<h3>{{ business.name }}</h3>
<i class="material-icons favorite-icon">favorite_border</i>
</div>
<div class="business-rating">
<div class="rating-stars">
<i v-for="n in 5" :key="n" class="material-icons">star</i>
</div>
<span class="rating-text">{{ business.rating }} 月售 {{ business.monthlySales }} 单</span>
<span class="delivery-tag">蜂鸟专送</span>
</div>
<div class="business-delivery">
<span>¥{{ business.minPrice }}起送 | ¥{{ business.deliveryFee }}配送</span>
<span>{{ business.distance }}km | {{ business.deliveryTime }}分钟</span>
</div>
<div class="business-tags">
<span class="tag">{{ business.tags[0] }}</span>
</div>
<div class="business-promotions">
<div class="promotion-item">
<span class="promotion-tag new">新</span>
<span class="promotion-text">饿了么新用户首单立减 9 元</span>
</div>
<div class="promotion-item">
<span class="promotion-tag special">特</span>
<span class="promotion-text">特价商品 5 元起</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- 底部导航 -->
<Footer></Footer>

</template>

<script>
//导入共通组件
import Footer from '../components/Footer.vue';
import AddressSelector from '../components/AddressSelector.vue';
import SearchBar from '../components/SearchBar.vue';

export default {
name: 'Index',
components: {
  Footer,
  AddressSelector,
  SearchBar
},
data() {
return {
categories: [
{ id: 1, name: '美食', icon: require('@/assets/dcfl01.png') },
{ id: 2, name: '早餐', icon: require('@/assets/dcfl02.png') },
{ id: 3, name: '跑腿代购', icon: require('@/assets/dcfl03.png') },
{ id: 4, name: '汉堡披萨', icon: require('@/assets/dcfl04.png') },
{ id: 5, name: '甜品饮品', icon: require('@/assets/dcfl05.png') },
{ id: 6, name: '速食简餐', icon: require('@/assets/dcfl06.png') },
{ id: 7, name: '地方小吃', icon: require('@/assets/dcfl07.png') },
{ id: 8, name: '米粉面馆', icon: require('@/assets/dcfl08.png') },
{ id: 9, name: '包子粥铺', icon: require('@/assets/dcfl09.png') },
{ id: 10, name: '炸鸡炸串', icon: require('@/assets/dcfl10.png') }
],
businesses: [
{
id: 1,
name: '万家饺子（软件园E18店）',
image: require('@/assets/sj01.png'),
rating: 4.9,
monthlySales: 345,
minPrice: 15,
deliveryFee: 3,
distance: 3.22,
deliveryTime: 30,
tags: ['各种饺子']
},
{
id: 2,
name: '川湘居（软件园店）',
image: require('@/assets/sj02.png'),
rating: 4.8,
monthlySales: 289,
minPrice: 20,
deliveryFee: 4,
distance: 2.5,
deliveryTime: 30,
tags: ['川湘菜']
},
{
id: 3,
name: '粤式茶餐厅',
image: require('@/assets/sj03.png'),
rating: 4.7,
monthlySales: 256,
minPrice: 25,
deliveryFee: 5,
distance: 3.8,
deliveryTime: 40,
tags: ['粤菜']
},
{
id: 4,
name: '韩式烤肉（软件园店）',
image: require('@/assets/sj04.png'),
rating: 4.6,
monthlySales: 198,
minPrice: 30,
deliveryFee: 6,
distance: 4.2,
deliveryTime: 50,
tags: ['韩式烤肉']
},
{
id: 5,
name: '日式料理',
image: require('@/assets/sj05.png'),
rating: 4.9,
monthlySales: 312,
minPrice: 35,
deliveryFee: 8,
distance: 3.5,
deliveryTime: 60,
tags: ['日式料理']
}
]
}
},
methods:{
  async getBusinessList() {
    try {
      const response = await this.$axios.get('business/list');
      if (response.data.code === 0) {
        this.businesses = response.data.data;
      } else {
        console.error('获取商家列表失败:', response.data.msg);
      }
    } catch (error) {
      console.error('请求商家列表出错:', error);
    }
  },
  toBusinessList(orderTypeId){
    this.$router.push({path:'/businessList',query:{orderTypeId:orderTypeId}});
  },
  handleAddressChange(address) {
    console.log('地址已更改:', address);
    // 这里可以处理地址变更后的逻辑，比如更新商家列表等
  },
  toBusinessInfo(business) {
    this.$router.push({
      path: '/businessInfo',
      query: { businessId: business.id }
    });
  }
},
mounted() {
  // 页面加载时获取商家列表
  this.getBusinessList();
}
}
</script>

<style>
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  --md-sys-color-primary: #006C51;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #89F8D7;
  --md-sys-color-on-primary-container: #002117;
  --md-sys-color-secondary: #4C6358;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #CFE9DB;
  --md-sys-color-on-secondary-container: #092017;
  --md-sys-color-surface: #FBFDF9;
  --md-sys-color-on-surface: #191C1A;
  --md-sys-color-surface-variant: #DCE5DD;
  --md-sys-color-on-surface-variant: #404943;
  --md-sys-color-outline: #707973;
  --md-sys-color-outline-variant: #C0C9C1;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #2E312F;
  --md-sys-color-inverse-on-surface: #EFF1ED;
  --md-sys-color-inverse-primary: #6CDBBC;
  --md-sys-color-surface-tint: #006C51;
  --md-sys-color-surface-tint-color: #006C51;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

.wrapper {
  width: 100%;
  min-height: 100vh;
  background-color: var(--md-sys-color-surface);
}

/* 顶部应用栏样式 */
.mdc-top-app-bar {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  height: 56px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.mdc-top-app-bar__row {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 16px;
}

.mdc-top-app-bar__section {
  display: flex;
  align-items: center;
}

.location-container {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--md-sys-color-on-primary);
}

.location-text {
  font-size: 16px;
  font-weight: 500;
}

/* 搜索栏样式 */
.search-container {
  margin-top: 56px;
  padding: 16px;
  background-color: var(--md-sys-color-primary);
}

.mdc-text-field {
  width: 100%;
  height: 48px;
  background-color: var(--md-sys-color-surface);
  border-radius: 24px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.mdc-text-field__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  margin-left: 8px;
}

.mdc-text-field__icon {
  color: var(--md-sys-color-outline);
}

/* 分类导航样式 */
.category-container {
  padding: 24px 16px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.category-icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  overflow: hidden;
}

.category-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-name {
  font-size: 14px;
  color: var(--md-sys-color-on-surface);
}

/* 促销横幅样式 */
.promo-banner {
  margin: 16px;
  padding: 24px;
  background: linear-gradient(135deg, var(--md-sys-color-primary-container), var(--md-sys-color-primary));
  border-radius: 16px;
  color: var(--md-sys-color-on-primary-container);
}

.promo-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promo-content h3 {
  font-size: 24px;
  font-weight: 500;
}

.promo-content p {
  font-size: 16px;
  opacity: 0.8;
}

/* 会员卡片样式 */
.member-card {
  margin: 16px;
  padding: 16px;
  background-color: var(--md-sys-color-secondary-container);
  border-radius: 16px;
}

.member-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.member-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.member-info img {
  width: 48px;
  height: 48px;
}

.member-text h3 {
  font-size: 18px;
  color: var(--md-sys-color-on-secondary-container);
}

.member-text p {
  font-size: 14px;
  color: var(--md-sys-color-on-secondary-container);
  opacity: 0.8;
}

/* 推荐商家部分样式 */
.recommend-section {
  padding: 24px 16px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.divider {
  flex: 1;
  height: 1px;
  background-color: var(--md-sys-color-outline-variant);
}

.section-header h2 {
  font-size: 20px;
  color: var(--md-sys-color-on-surface);
}

/* 筛选选项样式 */
.filter-options {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 8px;
}

/* 商家列表样式 */
.business-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.business-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background-color: var(--md-sys-color-surface);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.business-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

.business-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.business-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.business-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

.favorite-icon {
  color: var(--md-sys-color-outline);
}

.business-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-stars {
  display: flex;
  color: #FFB800;
}

.rating-text {
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant);
}

.delivery-tag {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.business-delivery {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant);
}

.business-tags {
  display: flex;
  gap: 8px;
}

.tag {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline-variant);
  padding: 2px 8px;
  border-radius: 4px;
}

.business-promotions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.promotion-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promotion-tag {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
}

.promotion-tag.new {
  background-color: #70BC46;
}

.promotion-tag.special {
  background-color: #F1884F;
}

.promotion-text {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
}

/* Material Design 按钮样式 */
.mdc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mdc-button--raised {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
}

.mdc-button--outlined {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-primary);
}

.mdc-button--text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: none;
}

.mdc-button:hover {
  opacity: 0.9;
}

.mdc-button:active {
  opacity: 0.8;
}

.practice-text {
  color: var(--md-sys-color-on-primary);
  font-size: 14px;
  font-weight: 500;
}
</style>

<style scoped>
.mdc-top-app-bar__section--align-end {
  position: relative;
  width: 100%;
  text-align: right;
}

.mdc-top-app-bar__section--align-end .practice-text {
  font-size: 2.8vw;
  color: #fff;
  opacity: 0.8;
  margin-right: 2vw;
  font-weight: normal;
  display: inline-block;
}
</style>
